<!DOCTYPE html>
<html>

<head>
    <!-- 那个收藏列表没有想象中的简单呜呜呜；
        实现了蓝点拖动音乐进度；插入MV；音量数字化展示；css声波动画 -->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cpj6dt');
            src: url('fonts/icomoon.eot?cpj6dt#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cpj6dt') format('truetype'), url('fonts/icomoon.woff?cpj6dt') format('woff'), url('fonts/icomoon.svg?cpj6dt#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>

</head>

<body>
    <div id="mp3">
        <div class="top">
            <h2 id="musicTitle" style="color:whitesmoke">Galway Girl</h2>
            <p id="singer" style="color:whitesmoke">MADILYN</p>
            <button id="like"></button>
            <button id="deo"></button>
            <video src="img/1.mp4" width="400" height="300" id="mv" controls="controls"></video>
        </div>
        <div id="effect-music">
            <div class="image" id="fmpic">
                <div id="pic">
                    <img src="img/3.jpg" alt="" id="cover">
                </div>
            </div>
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
        </div>

        <audio src="mp3/MADILYN - Galway Girl.mp3" controls="controls" id="mymp3"></audio>
        <div class="green">
            <h4 id="time">00:00</h4>
            <div id="jdt">
                <div id="hui">
                    <div id="hong"></div>
                </div>
                <div id="lan"></div>
            </div>
            <h4 id="timelong">00:00</h4>
        </div>
        <div class="btn">
            <!-- <button id="bf"></button> -->
            <!-- <button id="zt"></button> -->
            <button id="sys"></button>
            <button id="kt"></button>
            <button id="bfzt"></button>
            <button id="kj"></button>
            <button id="xys"></button>
            <br>
            <!-- <button id="tz"></button> -->
            <!-- 音量 -->
            <button id="jxyl"></button>
            <button id="jy"></button>
            <!-- <button id="jy"></button> -->
            <button id="zjyl"></button>
            <br>

        </div>
    </div>
    <div class="list">
        <table class="table">
            <thead>
                <tr>
                    <th width="50%">收藏列表</th>

                    <th width="30%" id="num">（3首）</th>
                    <th width="20%">
                        <button id="tuichu"></button>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="none">
                    <td colspan="2">TOM</td>
                    <td></td>

                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>